<template>
  <div class="login-index">
    <div class="login-index__logo"></div>
    <div class="login-index__info">
      <div class="avatar">
        <user-head :size="28" :showState="true"/>
      </div>
      <div class="item item-input flexbox" id="loginUserForm">
        <input oncontextmenu="return false" v-model="strAccount" type="text" class="input flex-1" id="loginUser" placeholder="YY号/手机号/通行证/邮箱" />
        <div class="login-list-btn select-beautify-btn" id="loginList"></div>
        <ul class="login-list-content select-beautify-content scrollbar-reset" id="loginListContent">
        </ul>
        <div class="bar"></div>
        <div class="err">&nbsp;</div>
      </div>
      <div class="item item-input item-login-password flexbox" id="loginPasswordForm">
        <input oncontextmenu="return false" type="password" v-model="password" class="input flex-1" data-type="password" id="loginPassword" placeholder="请输入密码" />
        <a href="javascript:void(0);" onclick="return false;" id="forgetPwdBtn" class="btn">忘记密码</a>
        <div class="bar"></div>
        <div class="err">&nbsp;asdfasdf</div>
      </div>
      <div class="item-group-check clearfix">
        <div class="item fl">
          <input type="checkbox" id="check" class="check" v-model="isRemeberPassword" />
          <label class="label" for="check"><span class="icon"></span><span class="txt">&nbsp; 记住密码</span></label>
        </div>
        <div class="item fr">
          <input type="checkbox" id="check2" class="check" v-model="isAutoLogin" />
          <label class="label" for="check2"><span class="icon"></span><span class="txt">&nbsp; 自动登录</span></label>
        </div>
      </div>
    </div>
    <div class="item item-submit">
      <a href="javascript:void(0);" class="button" @click.stop.prevent="onLoginClick($event)">登录</a>
    </div>
    <router-link class="item-signup" :to="{ path: '/reg' }">立即注册</router-link>
  </div>
</template>

<script>
import UserHead from '@/component/base/user-head/user-head'
import { Login } from '@/common/'

export default {
  name: 'login-index',
  components: {
    UserHead
  },
  data () {
    return {
      isRemeberPassword: false,
      isAutoLogin: false,
      password: '',
      strAccount: ''
    }
  },
  computed: {
  },
  created () {
  },

  methods: {
    onLoginClick (e) {
      Login.impl().login(this.strAccount, this.password, 0, this.isRemeberPassword, this.isAutoLogin, false)
    }
  }
}
</script>

<style lang="scss">
@import "~@/css/common/_variables";
@import "~@/css/lib/_mixin";

.login-index {
  width: $login-width;
  height: $login-height;
  background-color: $bg-color-login;
  display: flex;
  flex-direction: column;
  align-items: center;
  &__logo {
    width: 348px;
    height: 215px;
    background:url(./img/login-top.png) no-repeat center top;
  }
  &__info {
    -webkit-transition:all .4s ease-in-out 0s;
    transition:all .4s ease-in-out 0s;
  }
  .avatar {
    position: absolute;
    width: 28px;
    height: 28px;
    right: 66px;
    top: 225px;
    z-index: 2;
  }
  .item{
    position: relative;
    margin-bottom:15px;
    .label, .input, .button{
      width:100%;
      color:#ebebeb;
      font-family: "微软雅黑";
      display:block;
    }

    .input, .button{
      border:none;
      background: none;
    }

    .input {
      font-size: 14px;
      height: 40px;
      line-height: 40px;
      padding:0px 10px 0px 0px;
      font-family: Arial;

      &::-webkit-input-placeholder {
        font-size: 14px;
        color: #54575d;
        font-family: "微软雅黑";
      }
      &:-moz-placeholder, &::-moz-placeholder, &:-ms-input-placeholder{
        font-size: 14px;
        opacity: 1;
        color: #54575d;
        font-family: "微软雅黑";
      }
    }
    input[data-type="password"]{
      text-security:circle;
      -webkit-text-security:circle;
    }

    .label{
      color:#aaa;
      font-size:14px;
    }

    .button{
      background:#f29400;
      border-radius: 4px;
      font-size: 16px;
      text-align: center;
      height: 44px;
      color: #fff;
      cursor: pointer;
      -webkit-transition:all .2s ease 0s;
      transition:all .2s ease 0s;
      line-height: 44px;

      &:hover {
        background:#ffb034;
      }
      &:active {
        background:#ed8200;
      }
    }

    .button-disabled, .button-disabled:hover, .button-disabled:active{
      background: #484b51;
      color: #63676d;
    }

    label {
      .icon{
        width:18px;
        height:18px;
        border-radius:2px;
        border: 2px solid #535559;
        vertical-align: middle;
        position:relative;javascript:void(0);
        cursor: pointer;
        display:inline-block;
        background:none;

        &:before, &:after {
          content:'';
          width:13px;
          height:2px;
          background:#ebebeb;
          position:absolute;
          -webkit-transition:all .2s ease-in-out 0s;
          transition:all .2s ease-in-out 0s;
        }
        &:before{
          left:0;
          width:6px;
          bottom:4px;
          -webkit-transform:scale(0) rotate(0);
          transform:scale(0) rotate(0);
        }
        &:after{
          top:6px;
          right:-1px;
          -webkit-transform:scale(0) rotate(0);
          transform:scale(0) rotate(0);
        }
      }

      .txt {
        line-height: 18px;
        display: inline-block;
        cursor: pointer;
        vertical-align: middle;
        font-size: 12px;
        color: #91969c;
      }
    }
    .check {
      display: none;
    }
    .check:checked + label {
      color:#ebebeb;
      .icon{
        background:#f29400;
        border: 2px solid #f29400;
        &:before {
          -webkit-transform:scale(1) rotate(45deg);
          transform:scale(1) rotate(45deg);
        }
        &:after {
          -webkit-transform:scale(1) rotate(-45deg);
          transform:scale(1) rotate(-45deg);
        }
      }
    }
    input {
      border: none;
      outline: none;
      &:focus ~ .bar:before, &:focus ~ .bar:after {
        width: 50%;
      }
    }
    button {
      border: none;
      outline: none;
      cursor: pointer;
    }
    .bar {
      position: absolute;
      left: 0;
      bottom: 0;
      background: #535559;
      width: 100%;
      height: 1px;

      &:before, &:after {
        content: '';
        position: absolute;
        background: #f29400;
        width: 0;
        height: 2px;
        -webkit-transition: .2s ease;
        transition: .2s ease;
      }
      &:before {
        left: 50%;
      }
      &:after {
        right: 50%;
      }
    }
    .bar-err {
      &:before, &:after {
        width: 50%;
        background: #cd4646;
      }
    }
    .err {
      position: absolute;
      left: 0;
      bottom: -18px;
      font-size:12px;
      display: none;
      color: #cd4646;
      width: 100%;
      height: 16px;
    }
  }
  .item-group-check {
    height: 23px;
    padding-top: 2px;

    .item {
      margin: 0;
      &:last-child {
        text-align: right;
      }
    }
  }
  .item-input {
    padding-top: 5px;

    .btn{
      font-size: 12px;
      height: 45px;
      color: #91969c;
      line-height: 40px;

      &:hover {
        color: #f29400;
      }
    }
    .btn-disabled, .btn-disabled:hover {
      color: #aaa;
    }
    .input{
      padding-left: 0;
    }
  }
  .item-submit{
    margin-top: 26px;
    margin-bottom: 0;
    padding-bottom: 15px;
    .button {
      width: 200px;
    }
  }
  .item-signup{
    text-align: center;
    font-size: 12px;
    color: #91969c;
    cursor: pointer;
    &:hover{
      text-decoration: underline;
    }
  }
  .item-login-password .input {
    text-indent: 0px;
    padding-left: 0px;
  }
  .fl{
    float: left;
    display: inline;
  }
  .fr{
    float: right;
    display: inline;
  }
  .center {
    text-align: center;
  }
  .flexbox{
    display: -webkit-box;
    display: -ms-flexbox;
    -ms-box-orient: horizontal;
    /*IE10中显不一行，类似于flex-direction:row功能*/
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
  }

  .flex-1{
    -webkit-box-flex:1;
    -webkit-flex:1;
    -moz-flex:1;
    -ms-flex:1;
    flex:1;
    display: block !important;
  }
}
</style>
